import React, { useState } from 'react';
import { Drawer } from 'antd';
import TRNotification from '#/utils/notification';
import styles from './index.less';

const DrawerComponent = ({ title, iconType, onPress, MyComponent, width = 1400 }) => {
  const [visible, setVisible] = useState(true);

  const _title = () => {
    return (
      <div className={styles.title}>
        {iconType ? (
          <img src="" />
        ) : (
          <img src="" />
        )}
        <div className={styles.iconText}>{title}</div>
      </div>
    );
  };
  const _onCloseDrawer = () => {
    setVisible(false);
    onPress({ index: 0 });
  };
  const _onSave = () => {
    onPress({
      index: 1,
    });
  };
  return (
    <Drawer
      className={styles._drawer}
      title={_title()}
      width={width}
      onClose={_onCloseDrawer}
      visible={visible}
    >
      {<MyComponent save={_onSave} />}
    </Drawer>
  );
};
class MyDrawer {
  __key__ = '';

  show = (props) => {
    return new Promise((resolve) => {
      if (this.__key__ !== '') return;
      this.__key__ = String(Date.now());
      TRNotification.add({
        key: this.__key__,
        content: (
          <DrawerComponent
            {...props}
            onPress={(result) => {
              TRNotification.remove(this.__key__);
              this.__key__ = '';
              resolve(result);
            }}
          />
        ),
        duration: null,
      });
    });
  };

  dismiss = () => {
    if (this.__key__.length > 0) {
      TRNotification.remove(this.__key__);
      this.__key__ = '';
    }
  };
}

export default new MyDrawer();
